<template>
  <div class="box_cont">
    <div>
      <table></table>
      <div class="cont_hbyz" >
        <input class="shurushouji" placeholder="请输入手机号领取" 
        onfocus="javascript:if(this.placeholder!=='')this.placeholder=''" 
        v-model="user_mobile">
        <div class="huadong">
          <!-- 请按住滑块，移动到最右端 -->
          <div class="drag" ref="dragDiv">
            <div class="drag_bg"></div>
            <div class="drag_text">{{confirmWords}}</div>
            <div ref="moveDiv" @touchstart="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
          </div>            
        </div>

        <!-- 暂定点击 跳转到 待确认页面 -->
        <!-- <div class="lingqu" @click="todaiqueren">领取红包</div> -->
        <div class="lingqu" @click="tanchu">领取红包</div>  
        <div id="yanzheng" v-if="showtanchu">
          <div id="tanchukuang">

            <div class="guanbi clearfix">
              <img src="/static/img/guanbi.png" alt="" @click="guanbi">
            </div>
            <p>输入短信验证码领取红包</p>
            <label for="code">
              <ul class="shuzikuang">
                <li class="field-wrap" v-for="(item, index) in number" :key="index">
                  <i class="char-field">{{yanzhengvalue[index] || ''}}</i>
                </li>
              </ul>
            </label>
            <input ref="input" class="input-code" @keyup="handleInput($event)" v-model="yanzhengvalue"
              id="code" name="code" type="tel" :maxlength="number"
              autocorrect="off" autocomplete="off" autocapitalize="off" >
                        
          </div>
        </div>
        <!-- 提示框 -->
        <div class="tishisjh" v-if="showtishisj" @click="showtishisj=!showtishisj">请输入手机号</div>
        <div class="tishihk" v-if="showtishihk" @click="showtishihk=!showtishihk">请按住滑块，移动到最右端</div>
        <div class="tishiyzmcw" v-if="showtishiyzmcw" @click="showtishiyzmcw=!showtishiyzmcw">验证码输入错误</div>

        <div class="cont_title"> — 今天已有 <span>{{amount}}</span> 人领取了现金 — </div>

        <div class="cont_lists">
          <div class="user_item" v-for="(item,index) in list" :key="index"> <!--v-for="(item,index) in list" :key="index"-->
            <img :src="item.head?item.head:'/static/img/moren.png'" class="touxiang"><!--  :src="item.head?item.head:'/static/img/moren.png'"  -->
            <div class="info">
              <p><span>{{item.name}}</span><span>赚取了{{rmbNum}}元</span></p>
              <p><span>{{item.hour}}小时前</span><span>{{atoshiNum}} ATOS</span></p>
            </div>
          </div>
                   
        </div>
      </div>
    </div>   
  </div>
</template>

<script>
  import Vue from "vue";
  import MintUI from "mint-ui";
  import { Toast , MessageBox } from "mint-ui";
  Vue.use( MintUI , Toast , MessageBox );
  // cxr 引入路由
  import Router from "vue-router";
  Vue.use(Router);
  // 引入vuex
  import Vuex from "vuex";
  Vue.use(Vuex);

  export default {
    name: "hongbaoyanzheng",
    data() {
      return {
        list: [],
        amount:null,
        rmbNum:null,
        atoshiNum:null,

        // srsjvalue:"请输入手机号领取",
        /*滑块验证部分*/
        beginClientX:0,           /*距离屏幕左端距离*/
        mouseMoveStata:false,     /*触发拖动状态  判断*/
        maxwidth:'',               /*拖动最大宽度，依据滑块宽度算出来的*/
        confirmWords:'请按住滑块，移动到最右端',   /*滑块文字*/
        confirmSuccess:false,           /*验证成功判断*/

        /*弹出框 */ 
        showtanchu:false,
        /* 提示框*/
        showtishisj:false,
        showtishihk:false,
        showtishiyzmcw:false,
        /* 验证码*/
        yanzhengvalue:"",
        user_mobile:null,
        getuser_mobile:null,
      };
    },
    /* 验证码*/
    props: {
      number: {
        type: Number,
        default: 6
      },
      placeholder: {
        type: String,
        default: ''
      }
    },
    methods: {     
      getData() {
        let _this=this;
        _this.axios.post("/api/fakeUser/listFakeUser" ,{number:2}).then(res => {
          if (res.data.code == 100) {
            _this.amount=res.data.data.amount;
            _this.rmbNum=res.data.data.rmbNum;
            _this.atoshiNum=res.data.data.atoshiNum;
            _this.list=res.data.data.users;
          }  else {
            _this.tos(res.data.msg);
          }
        });
      },
      tos (test) {
        Toast({message: test, position: 'top', duration: 2000});
      },
      //滑块验证 
      mousedownFn:function (e) {
          if(!this.confirmSuccess){
              e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
              this.mouseMoveStata = true;
              this.beginClientX = e.changedTouches[0].clientX;
          }
      },        //mousedoen 事件
      successFunction(){
          this.confirmSuccess = true;
          this.confirmWords = '验证通过';
          if(window.addEventListener || window.attachEvent){
              document.getElementsByTagName('html')[0].removeEventListener('touchmove',this.mouseMoveFn);
              document.getElementsByTagName('html')[0].removeEventListener('touchend',this.moseUpFn);
          }else {
              document.getElementsByTagName('html')[0].removeEventListener('touchend',()=>{});
          }
          document.getElementsByClassName('drag_text')[0].style.color = '#fff';
          document.getElementsByClassName('drag_text')[0].style.width = '100%';
          document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
          document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
      },                //验证成功函数
      mouseMoveFn(e){
          if(this.mouseMoveStata){
              let width = e.changedTouches[0].clientX - this.beginClientX;
              if(width>0 && width<=this.maxwidth){
                  document.getElementsByClassName('handler')[0].style.left = width + 'px';
                  document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
              }else if(width>this.maxwidth){
                  this.successFunction();
              }
          }
      },                   //mousemove事件
      moseUpFn(e){
          this.mouseMoveStata = false;
          var width = e.changedTouches[0].clientX - this.beginClientX;
          if(width<this.maxwidth){
              document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
              document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
          }
      },                       //mouseup事件

      // 跳转到红包验证页面 
      todaiqueren(){
        return setTimeout(()=>{
          this.$router.push({path:'/daiqueren'});
        },2000)
      },
      
      //弹出验证码框
      tanchu(){
        this.getuser_mobile=this.user_mobile;
         const mobile =Number(this.getuser_mobile);
         window.localStorage.setItem("usermobile",mobile);
        if(mobile && this.confirmSuccess){
          let _this=this;
          // console.log(typeof mobile,mobile)
          _this.axios.get("/api/admin/SMS_phoneValidate?user_mobile="+mobile).then(res => {
            // console.log(res)
          if (res.data.code == 100) {
            _this.showtanchu=true;          
          }  else {
            console.log(err);
          }
        }).catch((err)=>{
          console.log(err);
        });  
        }else if(!mobile){
          this.showtishisj=true;
        }else if(!this.confirmSuccess){
          this.showtishihk=true;
        }                     
      },
      // 关闭弹出框
      guanbi(){
        this.showtanchu=false;
      },
      hideKeyboard() {
        // 输入完成隐藏键盘
        document.activeElement.blur(); // ios隐藏键盘
        this.$refs.input.blur(); // android隐藏键盘
      },
      handleSubmit() {
        this.$emit('input', this.yanzhengvalue);
      },
      handleInput(e) {
        this.$refs.input.yanzhengvalue = this.yanzhengvalue;
        console.log(this.$refs.input.yanzhengvalue)
        if (this.yanzhengvalue.length >= this.number) {
          this.getuser_mobile=this.user_mobile;
          const mobile =Number(this.getuser_mobile);
          this.hideKeyboard();
          let _this=this;

          // 跳转到待确定页面
          _this.axios.post("/api/admin/SMS_verification" ,{user_mobile:mobile, code:_this.yanzhengvalue|| _this.yanzhengvalue.split("").reverse().join("")}).then(res => {
            if (res.data.code == 100) {
              _this.todaiqueren();
            }  else {
              _this.showtishiyzmcw=true;
              _this.todaiqueren()
            }
          });

        }
        this.handleSubmit()
      }
    },
    mounted () {
      this.getData();

      // 滑块验证
      this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
      document.getElementsByTagName('html')[0].addEventListener('touchmove',this.mouseMoveFn);
      document.getElementsByTagName('html')[0].addEventListener('touchend',this.moseUpFn);
    },    
  }
</script>

<style lang="scss" scoped>
  @import "src/common/css/mixin";
  $background: #F9C54A;  
  .clearfix::after{
    overflow: hidden;
    clear: both;
    content: "";
    visibility: hidden;
    display: block;
    height: 0;
    line-height: 0
  }
  .box_cont{
    width:100%;
    min-height: 100vh;
    position:relative;
    .cont_hbyz{
        width:100%;
        min-height: 100vh;
        margin: 0 auto;
        // margin:Rem(0) auto;
        background:url("/static/img/bg.png") no-repeat ;
        background-size:100% 100%;
        position: relative;
        z-index:5;  
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .shurushouji{
            width:Rem(285);
            height:Rem(50);
            background:#ffffff;
            border-radius:Rem(4);
            margin-top: Rem(187);
            
            // position:absolute;
            // left:Rem(45);
            // top:Rem(187);
            text-align:center;
            line-height:Rem(50);
            font-family:PingFang-SC-Medium;
            font-size:Rem(18);
            color:#999999;
            outline:none;
            border:none
        }
        .huadong{
            width:Rem(285);
            height:Rem(50);
            background:#F5F5F5;
            border-radius:Rem(4);
            margin-top: Rem(25);
            // position:absolute;
            // left:Rem(45);
            // top:Rem(262);
            text-align:right;
            line-height:Rem(50);
            font-family:PingFang-SC-Medium;
            font-size:Rem(18);
            color:#999999;
            position:relative;
            .drag{
                margin: Rem(5) Rem(10) Rem(5) Rem(5);
                position: relative;
                background-color: #F5F5F5;
                width:Rem(275) ;
                height: Rem(40);
                line-height: 100%;
                text-align: center;
                .handler{
                    width: Rem(45);
                    // height: 32px;
                    height: 100%;
                    cursor: move;
                }
                .handler_bg{
                    background: #fff url("/static/img/jiantou.png") no-repeat center;
                }
                .handler_ok_bg{
                    background: #fff url("/static/img/tongguo.png") no-repeat center;
                }
                .drag_bg{
                    background-color: #22AC38;
                    height: 100%;
                    width: 0;
                }
                .drag_text{
                    position: absolute;
                    top: Rem(11);
                    right:0;
                    text-align: center;
                    -moz-user-select: none;
                    -webkit-user-select: none;
                    user-select: none;
                    -o-user-select:none;
                    -ms-user-select:none;
                }  
            }            
        }
        .lingqu{
            width:Rem(285);
            height:Rem(50);
            background:#FFC948;
            border-radius:Rem(4);
            margin-top: Rem(50);
            // position:absolute;
            // left:Rem(45);
            // top:Rem(362);
            text-align:center;
            line-height:Rem(50);
            font-family:PingFang-SC-Medium;
            font-size:Rem(18);
            color:#222222;
        }
// 弹出框设置
        #yanzheng{
              width:Rem(375);
              min-height: 100vh;
              margin:Rem(0) auto;
              background:rgba(0,0,0,.5);
              position: fixed;
              top:0;
              left:0;
              z-index:15;
              #tanchukuang{
                width:Rem(285);
                height:Rem(200);
                margin:0 auto;
                background:url("/static/img/yanzhengma.png") no-repeat;
                background-size: 100% 100%;
                position: relative;
                top:Rem(253);
                z-index:20;
                text-align: center;
                .guanbi{
                  width: 100%;
                  height:Rem(28);
                  img{
                    float: right;
                    margin-top: Rem(15);
                    margin-right: Rem(15);
                    width: Rem(13);
                    height: Rem(13);
                  }
                }
                p{
                 height: Rem(15);
                 line-height: Rem(15);
                 font-size: Rem(15);
                 font-family: PingFang-SC-Medium;
                 color: #FFFFFF;
                 text-align: center;
                 margin-top: Rem(22);
                }
                .shuzikuang{
                  display: flex;
                  justify-content: space-between;
                  height: Rem(136);
                  align-items: center;
                  box-sizing: border-box;
                  padding: 0 Rem(15);
                  li{
                    list-style: none;
                    display: block;
                    width: Rem(40);
                    height: Rem(50);
                    border: #FFFFFF solid Rem(1);
                    box-sizing: border-box;
                    border-radius: Rem(2);
                    background: rgba(0,0,0,0);
                    color: #fff;
                    .char-field {
                      font-style: normal;
                    }
                  }
                }
                .input-code{
                  position: absolute;
                  left: -9999px;
                  top: -99999px;
              //  解决输入反向打印问题
                  // width: 0;
                  // height: 0;
                  // opacity: 0;
                  // overflow: visible;
                  // z-index: -1;
                }
              }
        }
        .cont_title{
            height:Rem(15);
            line-height:Rem(15);
            text-align: center;
            color:$background;
            font-size:Rem(15);
            // position:absolute;
            // left:Rem(86);
            // top:Rem(455);
            margin-top: Rem(43);
            span{
              color:#ffffff;
            }
        }
        .cont_lists{
            background:rgba(0,0,0,0.15);
            // position: absolute;
            // left: Rem(15);
            // top:Rem(489);
            margin-top: Rem(20);
            margin-bottom: Rem(41);
            width:Rem(345);
            height: Rem(137);
            padding-bottom:Rem(20);           
              .user_item{
                box-sizing: border-box;
                width:Rem(345);
                height: 50%;
                padding:Rem(20);
                display: flex;
              .touxiang{
                  width:Rem(45);
                  height:Rem(45);
                  border-radius: 50%;
                  margin-top:Rem(3);
                  margin-right:Rem(15);
              }
              .info{
                  width:Rem(273);
                  margin:Rem(6) 0;
                  P{
                      display: flex;
                      justify-content: space-between;
                      flex-wrap: nowrap;
                      font-size:Rem(15);
                  }
                  p:first-child{
                      span{
                          color:#ffffff;
                      }
                  }
                  p:last-child{
                      span{
                          color:$background;
                      }
                  }
                }
              }    
        }        
    // 提示框设置
        .tishisjh,.tishihk,.tishiyzmcw{
          width: Rem(375);
          height: 100vh;
          position: fixed;
          z-index: 25;
          background: rgba(0,0,0,0.7);
          color: #FFFFFF;
          font-size: Rem(25);
          line-height: 100vh;
          text-align: center;
          top:0;
          
        }
    } 
  }
</style>